<template>
	<div class="activeSlider">
		<div class="slider1">
			<h3>基础用法</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<span>默认</span>
					<el-slider v-model="value1"></el-slider>
				</el-col>
				<el-col :span="10">
					<span>自定义初始值</span>
					<el-slider v-model="value2"></el-slider>
				</el-col>
				<el-col :span="10">
					<span>隐藏ToolTip</span>
					<el-slider v-model="value3" :show-tooltip="false"></el-slider>
				</el-col>
				<el-col :span="10">
					<span>格式化ToolTip</span>
					<el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
				</el-col>
			</el-row>
		</div>
		<div class="slider2">
			<h3>离散值 -show-step(step可以设置步长)</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<span>不显示间断点</span>
					<el-slider v-model="value6" :step="10"></el-slider>
				</el-col>
				<el-col :span="10">
					<span>显示间断点</span>
					<el-slider v-model="value7" :step="10" show-stops></el-slider>
				</el-col>
			</el-row>
		</div>
		<div class="slider3">
			<h3>带输入框</h3>
			<el-row :gutter="20">
				<el-col :span="14">
					<el-slider v-model="value8" show-input></el-slider>
				</el-col>
			</el-row>
		</div>
		<div class="slider4">
			<h3>范围选择-range</h3>
			<el-row :gutter="20">
				<el-col :span="10">
					<el-slider v-model="value9" range show-stops :max="10"></el-slider>
				</el-col>
			</el-row>
		</div>
		<div class="slider5">
			<h3>竖向模式-vertical(使用时必须设置高度)</h3>
			<el-row>
				<el-col :span="2">
					<el-slider v-model="value10" vertical height="200px"></el-slider>
				</el-col>
				<el-col :span="1" style="width:3.16667%;">
					<span style="float: left;">原来我可以长这么高</span>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value1: 0,
				value2: 50,
				value3: 45,
				value4: 66,
				value6: 0,
				value7: 0,
				value8: 0,
				value9: ['2', '8'],
				value10: 10
			}
		},
		methods: {
			formatTooltip(val) {
				return val / 100;
			}
		}
	}
</script>

<style>

</style>